<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            background-color: green;
            width: 100px;
            height: 200px;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box"></div>
<input type="button" id="btn" value="点我">
<script>
    /*
    函数名，字母下滑线,$开始，后可以跟上任意个字母、数字、下滑线、$
    注意，不能使用关键字  不能用 if for while do
    $
    _
    $ff
    fun

     */

    function $(id){
        return document.getElementById(id);
    }
    function getCSSAttr(obj,attr) {
        var tmpObj = window.getComputedStyle(obj);
        var t =  tmpObj[attr];
        //如果包含px,我们进行数据转换
        if(t.search('px')!=-1){
            t = parseInt(t);
        }
        return t;

    }
   var box = $('box');
    var btn = $('btn');
    console.log(box);
    console.log(btn);
    console.log(box.style.backgroundColor);

    var cssObj = window.getComputedStyle(box);

    console.log(cssObj)
    console.log(cssObj.width);
    console.log("******************************");
    console.log(getCSSAttr(box,'width'))
    var w = getCSSAttr(box,'width');

    var h = getCSSAttr(box,'height');
    alert(w+h);

</script>
</body>
</html>